<template>
  <div class="com-page">
    <el-container style="height: 100%;">
      <!--TODO 侧边栏-->
      <el-aside :width="sideWidth+'px'" style="background-color: rgb(48, 65, 86);height: 100%;overflow: hidden">
        <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"></Aside>
      </el-aside>
      <el-container>
        <!--TODO 顶栏-->
        <el-header>
          <Header :collapseBtnclass="collapseBtnclass" :collapse="collapse"></Header>
        </el-header>
        <!-- TODO 主体部分-->
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>

import Aside from "@/components/manage/Aside";
import Header from "@/components/manage/Header";
export default {
  name: 'manage',
  components: {
    Aside,
    Header,
  },
  data() {
    return {
      // 表单格式设置相关数据绑定
      collapseBtnclass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
    };
  },
  methods: {
    collapse() {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.sideWidth = 64;
        this.collapseBtnclass = 'el-icon-s-unfold';
        this.logoTextShow = false
      } else if (!this.isCollapse) {
        this.sideWidth = 200;
        this.collapseBtnclass = 'el-icon-s-fold';
        this.logoTextShow = true
      }
    },
  },
}
</script>
<style>

</style>